<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="header-row">
          <div class="item-col">
            <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
          </div>
          <div class="item-col">
            <el-input
              placeholder="输入搜索内容"
              v-hasPermi="['system:attachment:query']"
              v-model="queryFrom.fileName"
              @change="searchAttachment"
              @input="searchAttachment"
              clearable></el-input>
          </div>
          <div class="item-col">
            <el-button icon="el-icon-refresh" circle @click="ChangeRefresh"></el-button>
          </div>
          <div class="item-col" v-show="checkList.length > 0">
            <el-button type="danger" round v-hasPermi="['system:attachment:remove']" @click="delAttachment">删除</el-button>
          </div>
          <div class="item-col" v-show="checkList.length > 0">
            <el-button type="primary" round @click="checkAll = false;checkList = []">取消选择</el-button>
          </div>
          <div class="item-col" v-show="checkList.length > 0">
            <el-button>已选：{{ checkList.length }}</el-button>
          </div>
          <div class="item-col">
            <el-button>总数：{{ attachmentList.length }}</el-button>
          </div>
        </div>
      </div>
      <el-skeleton :loading="skeletonStatus" animated>
        <template slot="template">
          <el-row :gutter="15">
            <el-col :span="3" v-for="index in 24" :key="index" style="margin-bottom: 12px">
              <el-skeleton-item
                variant="image"
                style="width: 100%; height: 185px;"
              />
              <div style="padding: 14px;">
                <el-skeleton-item variant="h3" style="width: 100%;" />
              </div>
            </el-col>
          </el-row>
        </template>
        <template>
          <el-row :gutter="15">
            <el-col :span="3" v-for="(item, index) in attachmentList" :key="index" style="margin-bottom: 12px">
              <el-tooltip class="item" effect="dark" :content="item.fileName" placement="top">
                <el-card style="cursor: pointer" shadow="hover" :body-style="{padding: '0px',height: '214px'}">
                  <el-checkbox-group class="img-checkbox" v-model="checkList" @change="handleCheckedCitiesChange">
                    <el-checkbox class="img-el-checkbox" :label="item.filePath"></el-checkbox>
                  </el-checkbox-group>
                  <div @click="openDialog(item)">
                    <image-preview
                      style="width: 100%;height: 185px;border-radius: 0;box-shadow: none;"
                      :preview="false"
                      fit="contain"
                      :src="item.fileUrl"></image-preview>
                  </div>
                  <div class="img-title"
                       @click="openDialog(item)">
                    {{ item.fileName }}
                  </div>
                </el-card>
              </el-tooltip>
            </el-col>
            <el-empty v-if="attachmentList < 1" description="暂无附件"></el-empty>
          </el-row>
        </template>
      </el-skeleton>
    </el-card>

    <!--详细信息-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      @closed="closeDialog"
      center>
      <el-descriptions :column="1">
        <el-descriptions-item label="图片预览">
          <image-preview
            style="width: auto;height: 185px;border-radius: 0;box-shadow: none;"
            fit="contain"
            :src="attachmentInfo.fileUrl"></image-preview>
        </el-descriptions-item>
        <el-descriptions-item label="文件名称">{{ attachmentInfo.fileName }}</el-descriptions-item>
        <el-descriptions-item label="储存位置">{{ attachmentInfo.filePath }}</el-descriptions-item>
        <el-descriptions-item label="文件大小">
          {{ (attachmentInfo.fileSize / 1000) >= 1024 ? ((attachmentInfo.fileSize / 1000) / 1024).toFixed(2) + " MB" : (attachmentInfo.fileSize / 1000).toFixed(2) +" KB" }}
        </el-descriptions-item>
        <el-descriptions-item label="文件类型">{{ attachmentInfo.fileType }}</el-descriptions-item>
        <el-descriptions-item label="访问链接">
          <el-link type="primary" :href="getFullUrl(attachmentInfo.fileUrl)" target="_blank">{{ attachmentInfo.fileUrl }}</el-link>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">按下ESC关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { listAttachment, delAttachment } from "@/api/system/attachment"
export default {
  name: "Attachment",
  data() {
    return {
      // 查询表单
      queryFrom: {
        fileName: ""
      },
      // 是否全选
      checkAll: false,
      // 选中的列表
      checkList: [],
      // 附件路径列表
      pathList: [],
      // 附件列表
      attachmentList: [],
      // 骨架屏状态
      skeletonStatus: true,
      // 信息弹窗标题
      dialogTitle: "附件信息",
      // 信息弹窗状态
      dialogVisible: false,
      // 附件信息
      attachmentInfo: {}
    };
  },
  created() {
    this.getAttachmentList();
  },
  methods: {
    // 获取附件列表
    getAttachmentList(){
      this.skeletonStatus = true;
      listAttachment(this.queryFrom).then(res => {
        if(res.code === 200){
          this.attachmentList = res.data;
          let pathList = [];
          this.attachmentList.forEach(item => {
            pathList.push(item.filePath);
          });
          this.pathList = pathList;
          this.skeletonStatus = false;
        }
      });
    },
    // 全选
    handleCheckAllChange(val) {
      this.checkList = val ? this.pathList : [];
    },
    // 选择
    handleCheckedCitiesChange(value) {
      this.checkList = value;
      this.checkAll = this.checkList.length === this.pathList.length;
    },
    // 刷新附件列表
    ChangeRefresh(){
      this.getAttachmentList();
      this.$message.success("刷新成功");
    },
    // 删除附件
    delAttachment(){
      this.$confirm("此操作将永久删除该附件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        delAttachment(this.checkList).then(res => {
          if(res.code === 200){
            this.$message.success("删除成功");
            this.getAttachmentList();
            this.checkAll = false;
            this.checkList = [];
          }
        });
      }).catch(() => {
        this.$message.info("已取消删除");
      });
    },
    // 搜索附件
    searchAttachment(){
      this.getAttachmentList();
    },
    // 打开弹窗
    openDialog(row){
      this.attachmentInfo = row;
      this.dialogVisible = true;
    },
    // 关闭弹窗
    closeDialog(){
      this.dialogVisible = false;
      // 重置表单
      this.attachmentInfo = {};
    },
    // 获取完整地址
    getFullUrl(url){
      return process.env.VUE_APP_BASE_API + url;
    }
  }
}
</script>

<style scoped>
.header-row{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
}
.item-col{
  width: auto;
  margin-right: 10px;
}
.img-title{
  margin: 2px 5px 5px;
  font-size: 14px;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
.img-checkbox{
  position: absolute;
  margin: 5px 0 0 5px;
  z-index: 1;
}
.img-el-checkbox{
  width: 15px;
  overflow: hidden;
}
</style>
